<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import "cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "cesium";
import CircleDiffusion from "@/utils/cesiumCtrl/diffuse.js";
let viewer = null;

onMounted(() => {
  initCesium();
});

const initCesium = () => {
  Cesium.Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2MzU4NzcwYS0yYjhjLTQ3ZTYtOGM4OC0yMjViMzg5YWNiM2MiLCJpZCI6MTgxMzU5LCJpYXQiOjE3MDE3MDIxNTd9.nMroTGyHYS7g3jjRX2HMLkAA1bbHMfEuTBLH2BCYAuM";
  viewer = new Cesium.Viewer("scene2", {
    animation: false, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    shadows: true,
    shouldAnimate: true,
    brightness: 0.8,
    contrast: 1.5,
  });

  viewer._cesiumWidget._creditContainer.style.display = "none";

  const layer = new Cesium.UrlTemplateImageryProvider({
    url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",

    minimumLevel: 4,

    maximumLevel: 18,
  });

  viewer.imageryLayers.addImageryProvider(layer);
  //2.Cesium加载高德影像
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(117.12135, 31.818807, 40000.0),
  });

  const circleDiffusion = new CircleDiffusion(viewer, "circle");
  circleDiffusion.add([117.12135, 31.818807, 40000.0], "#F7EB08", 10000, 5000);
};
</script>

<template>
  <div id="scene2" style="height: 100vh; width: 100vw; overflow: hidden"></div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

.botton {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 20px;
}
</style>
